<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>

    <link href="../../../static/css/tax/taxMain.css"   th:href="@{/css/tax/taxMain.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">

<!--大的白色背景框-->
<div>
    <!--显示统计数据（合计、本日新增、本周新增）-->
    <div class="row" >
        <!--    合计-->
        <div class="col-xs-9 col-sm-3 col-md-3 statics-bkg-white ">
            <img class="icon"  th:src="@{/img/taxMain-total.png}" >
            <div class="title-data">
                <p class="titleText">合计</p>
                <p class="numbers" th:text="${totalCount}">5000</p>
            </div>
        </div>

        <!--    本日新增-->
        <div class="col-xs-9 col-sm-3 col-md-3 statics-bkg-white ">
            <img class="icon"  th:src="@{/img/taxMain-day.png}" >
            <div class="title-data">
                <p class="titleText">本日新增</p>
                <p class="numbers" th:text="${todayCount}">5000</p>
            </div>
        </div>

        <!--本周新增-->
        <div class="col-xs-9 col-sm-3 col-md-3 statics-bkg-white ">
            <img class="icon"  th:src="@{/img/taxMain-week.png}" >
            <div class="title-data">
                <p class="titleText">本周新增</p>
                <p class="numbers" th:text="${weekCount}">5000</p>
            </div>
        </div>

    </div>


    <!-- 显示1天 7天  30天 按钮切换统计图表数据   -->

    <div class="days-segment" id="segment">
        <button type="button" onclick="getStatistics.call(this,'1')" class="button-selected">1天</button>
        <button type="button" onclick="getStatistics.call(this,'7')" class="button-normal">7天</button>
        <button type="button" onclick="getStatistics.call(this,'30')" class="button-normal">30天</button>
    </div>

    <!-- 显示用echarts制作的图表   -->

    <div id="chartmain" style="width: auto; height: 700px;"></div>




</div>






<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ruoyi/echarts.min.js" th:src="@{/ruoyi/echarts.min.js}"></script>

<script type="text/javascript">
    $('#pay-qrcode').click(function(){
        var html=$(this).html();
        parent.layer.open({
            title: false,
            type: 1,
            closeBtn:false,
            shadeClose:true,
            area: ['600px', 'auto'],
            content: html
        });
    });

    $(function() {
        var  button1 = document.getElementById('segment').getElementsByTagName('button')[0];

        getStatistics.call( button1,'1');
    });


    //获取echarts图表使用的一天 七天 30天数据
    function getStatistics(type) {

       var buttons =  document.getElementById('segment').getElementsByTagName('button');
       for (var i = 0 ;i < buttons.length;i++){
           buttons[i].className = 'button-normal';
       }
       console.log(this);
        this.className='button-selected';

        var url  ;
        if (type =='1') {
            url = '/tax/getOneDaysUsers';

        } else if(type =='7'){
            url = '/tax/getSevenDaysUsers';
        } else if(type =='30'){
            url = '/tax/getThirtyDaysUsers';
        }else {
            url = '';
        }



        var config = {
            url: 'http://localhost:8088'+url,
            type: 'get',
            success: function(result) {
                console.log(result);
                var xDataArray = [] ;
                var yDataArray  = [];
                result.map(function(item){
                    xDataArray.push(item.registerData);
                    yDataArray.push(item.registerCount);
                })

                refreshTableData(xDataArray,yDataArray)
            }
        };
        $.ajax(config)
        // $.operate.get('http://localhost:8088/tax/selectRegisterUserByWeek')
    }



    //指定图标的配置和数据
    var option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            itemStyle:{color:'#266EB9'},
            lineStyle:{color:'#266EB9'},
            areaStyle: {color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(25,130,203,0.19)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(25,130,203,0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }}
        }]
    };

    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);



    //根据窗口的大小变动图表 --- 重点
    window.onresize = function(){
        myChart.resize(); //若有多个图表变动，可多写

    }

    function refreshTableData(xData,yData) {
        if (!myChart){
            return ;
        }
        //更新数据
        var option = myChart.getOption();
        console.log(option);

        option.xAxis[0].data = xData;
        option.series[0].data = yData;
        myChart.setOption(option);
    }


</script>
</body>
</html>
